/**
 *
 * @Author: zhangshubin
 * @Date: 2023-12-11 11:12:39
 * @Last Modified by: zhangshubin
 * @Last Modified time: 2023-12-26 16:18:11
 * /import { Col, ColorPicker, Row, Select, Space } from 'antd'
 */
import {
  Col,
  ColorPicker,
  DropDownProps,
  Dropdown,
  InputNumber,
  MenuProps,
  Row,
  Select,
  Space
} from 'antd'
import lineIcon from '@iconify/icons-tabler/line'
import elbowConnectorOutline from '@iconify/icons-teenyicons/elbow-connector-outline'
import curvedConnectorOutline from '@iconify/icons-teenyicons/curved-connector-outline'
import IconButton from '@/components/Icon'
import HDropdown from '@/components/Dropdown'
import { useEffect, useState } from 'react'
import EditorExecutor from '@/executor/EditorExecutor'
import { PropsBarState } from '@/types/index'

// 箭头类型
const ArrowTypeOption = [
  {
    value: 'none',
    label: '无',
    fill: 1
  },
  {
    value: 'classic',
    label: '',
    fill: 1
  },
  {
    value: 'block',
    label: '',
    fill: 1
  },
  {
    value: 'thindiamond',
    label: '',
    fill: 1
  },
  {
    value: 'thindiamondtrans',
    label: '',
    fill: 0
  },
  {
    value: 'oval',
    label: '',
    fill: 1
  },
  {
    value: 'ovaltrans',
    lable: '',
    fill: 0
  }
]
// 线形
const LineTypeOptions = {
  solid: {
    dash: null,
    pattern: null
  },
  dashed: {
    dash: 1,
    pattern: null
  },
  dotted: {
    dash: 1,
    pattern: '1 1'
  },
  dotted2: {
    dash: 1,
    pattern: '1 2'
  },
  dotted4: {
    dash: 1,
    pattern: '1 4'
  }
}

/**
 * 获取线性选项
 * @param type
 * @returns
 */
function getArrowTypeItems(type: 'start' | 'end') {
  return ArrowTypeOption.map((option) => {
    return {
      key: option.value,
      label: (
        <div className={option.value != 'none' ? `geSprite geSprite-${type}${option.value}` : ''}>
          {option.label ? option.label : ''}
        </div>
      )
    }
  })
}

export default function LineSetting(props: { cellState: PropsBarState }) {
  // 开始箭头类型
  const [startArrow, setStartArrow] = useState('none')
  // 结束箭头类型
  const [endArrow, setEndArrow] = useState('none')
  // 线的类型
  const [lineType, setLineType] = useState('solid')
  // 线宽
  const [lineWidth, setLineWidth] = useState(1)
  // 边框颜色
  const [strokeColor, setStrokeColor] = useState('')
  // 线的曲线程度
  const [waypoints, setWaypoints] = useState('line')
  // 设置箭头设置是否可用
  const [arrowSettingDisable, setArrowSettingDisable] = useState(false)

  /**
   * 箭头类型发生变化
   * @param menu
   * @param type
   */
  const onArrowTypeChange = (menu: any, type: 'start' | 'end') => {
    console.log(menu.key)
    let rowStyleName = ''
    let fillName = ''
    if (type == 'start') {
      setStartArrow(menu.key)
      rowStyleName = mxConstants.STYLE_STARTARROW
      fillName = mxConstants.STYLE_STARTFILL
    } else if (type == 'end') {
      setEndArrow(menu.key)
      rowStyleName = mxConstants.STYLE_ENDARROW
      fillName = mxConstants.STYLE_ENDFILL
    }
    const opt = ArrowTypeOption.find((item) => item.value == menu.key)
    EditorExecutor.setCellStyles(rowStyleName, menu.key)
    if (opt) {
      EditorExecutor.setCellStyles(fillName, opt.fill)
    }
  }

  useEffect(() => {
    const { style, vertices } = props.cellState
    const { dashed, dashPattern, strokeWidth, strokeColor: sColor } = style
    let ltype = 'solid'
    if (dashed) {
      if (dashPattern == LineTypeOptions.dotted.pattern) {
        // 如果有设置曲线格式
        ltype = 'ltype'
      } else if (dashPattern == LineTypeOptions.dotted2.pattern) {
        ltype = 'dashed2'
      } else if (dashPattern == LineTypeOptions.dotted4.pattern) {
        ltype = 'dashed4'
      } else {
        ltype = 'dashed'
      }
    } else {
      ltype = 'solid'
    }
    setLineType(ltype)
    //线条宽度
    if (strokeWidth) {
      setLineWidth(parseInt(strokeWidth))
    }
    //线条颜色
    if (sColor) {
      setStrokeColor(sColor)
    }
    // 线的平滑度
    const edge = mxUtils.getValue(style, mxConstants.STYLE_EDGE, 'null')
    const curve = mxUtils.getValue(style, mxConstants.STYLE_CURVED, null)
    const noEdgeStyle = mxUtils.getValue(style, mxConstants.STYLE_NOEDGESTYLE, null)
    const fStr = `${edge}_${curve}_${noEdgeStyle}`
    let w = 'line'
    if (fStr == 'orthogonalEdgeStyle_null_null') {
      w = 'elbow'
    } else if (fStr == 'orthogonalEdgeStyle_1_null') {
      w = 'curved'
    }
    setWaypoints(w)

    //箭头形状
    const startArrow = mxUtils.getValue(style, mxConstants.STYLE_STARTARROW, null)
    const startFill = mxUtils.getValue(style, mxConstants.STYLE_STARTFILL, null)
    const start = ArrowTypeOption.find((item) => item.value == startArrow && item.fill == startFill)
    const s = start ? start.value : 'none'
    setStartArrow(s)

    const endArrow = mxUtils.getValue(style, mxConstants.STYLE_ENDARROW, null)
    const endFill = mxUtils.getValue(style, mxConstants.STYLE_ENDFILL, null)
    const end = ArrowTypeOption.find((item) => item.value == endArrow && item.fill == endFill)
    const e = end ? end.value : 'none'
    setEndArrow(e)

    //如果是vertices类型，则不需要箭头的设置
    if (vertices.length > 0) {
      setArrowSettingDisable(true)
    } else {
      setArrowSettingDisable(false)
    }
  }, [props.cellState])

  return (
    <Space direction="vertical" size="small" style={{ display: 'flex' }}>
      <Row>
        <Col span={10} className="label">
          线条
        </Col>
      </Row>
      <Row gutter={10}>
        <Col span={18}>
          <Select
            options={[
              {
                label: '实线',
                value: 'solid'
              },
              {
                label: '虚线',
                value: 'dashed'
              },
              // {
              //   label: '点线',
              //   value: 'dotted'
              // },
              {
                label: '点线',
                value: 'dotted2'
              },
              {
                label: '点划线',
                value: 'dotted4'
              }
            ]}
            value={lineType}
            defaultActiveFirstOption={true}
            className="h-26px w-100% font-size-12px"
            onChange={(v) => {
              //@ts-ignore
              const lt: any = LineTypeOptions[v]
              EditorExecutor.setCellStyles(mxConstants.STYLE_DASHED, lt.dash)
              EditorExecutor.setCellStyles(mxConstants.STYLE_DASH_PATTERN, lt.pattern)
            }}
          />
        </Col>
        <Col span={6}>
          <ColorPicker
            value={strokeColor}
            onChangeComplete={(c) => {
              EditorExecutor.setCellStyles(mxConstants.STYLE_STROKECOLOR, c.toHexString())
            }}
          />
        </Col>
      </Row>
      <Row gutter={10}>
        <Col span={12}>
          <InputNumber
            size="small"
            className="h-26px w-100% font-size-12px"
            formatter={(value) => `${value}pt`}
            //@ts-ignore
            parser={(value) => value!.replace('pt', '')}
            value={lineWidth}
            onChange={(v) => {
              if (v != null) {
                setLineWidth(v)
              }
            }}
            onStep={(value) => {
              EditorExecutor.setCellStyles(mxConstants.STYLE_STROKEWIDTH, value)
            }}
            onBlur={() => {
              EditorExecutor.setCellStyles(mxConstants.STYLE_STROKEWIDTH, lineWidth)
            }}
            onPressEnter={() => {
              EditorExecutor.setCellStyles(mxConstants.STYLE_STROKEWIDTH, lineWidth)
            }}
          />
        </Col>
        <Col span={12} className="flex flex-justify-between  bg-#ffffff pr-10px">
          <IconButton
            icon={lineIcon}
            tip="直线"
            className="h-24px w-24px"
            fontSize={20}
            checked={waypoints == 'line'}
            onClick={() => {
              EditorExecutor.setCellStyles(mxConstants.STYLE_EDGE, '')
              EditorExecutor.setCellStyles(mxConstants.STYLE_CURVED, null)
              EditorExecutor.setCellStyles(mxConstants.STYLE_NOEDGESTYLE, null)
            }}
          />
          <IconButton
            icon={elbowConnectorOutline}
            tip="直角"
            className="h-24px w-24px "
            fontSize={20}
            checked={waypoints == 'elbow'}
            onClick={() => {
              EditorExecutor.setCellStyles(mxConstants.STYLE_EDGE, mxConstants.EDGESTYLE_ORTHOGONAL)
              EditorExecutor.setCellStyles(mxConstants.STYLE_CURVED, null)
              EditorExecutor.setCellStyles(mxConstants.STYLE_NOEDGESTYLE, null)
            }}
          />
          <IconButton
            icon={curvedConnectorOutline}
            tip="曲线"
            className="h-24px w-24px "
            fontSize={20}
            checked={waypoints == 'curved'}
            onClick={() => {
              EditorExecutor.setCellStyles(mxConstants.STYLE_EDGE, mxConstants.EDGESTYLE_ORTHOGONAL)
              EditorExecutor.setCellStyles(mxConstants.STYLE_CURVED, 1)
              EditorExecutor.setCellStyles(mxConstants.STYLE_NOEDGESTYLE, null)
            }}
          />
        </Col>
      </Row>
      <Row gutter={10}>
        <Col span={8}>箭头类型</Col>
        <Col span={8}>
          <HDropdown
            disabled={arrowSettingDisable}
            menu={{
              items: getArrowTypeItems('start'),
              onClick: (key) => onArrowTypeChange(key, 'start')
            }}
            className="h-26px w-100%"
            value={startArrow}
          ></HDropdown>
        </Col>
        <Col span={8}>
          <HDropdown
            disabled={arrowSettingDisable}
            menu={{
              items: getArrowTypeItems('end'),
              onClick: (key) => onArrowTypeChange(key, 'end')
            }}
            className="h-26px w-100%"
            value={endArrow}
          ></HDropdown>
        </Col>
      </Row>
    </Space>
  )
}
